<template>
    <div id="main-nav" :class="{opened:isNavShow}">
      <span class="tog-icon" @click="setNavShow()"></span>
        <ul>
          <li :class="{active:cur_nav==='2'}" @click="setCurNav('2')">城市一张图</li>
          <li :class="{active:cur_nav==='4'}" @click="setCurNav('4')">城市交通画像</li>
          <li :class="{active:cur_nav==='1'}" @click="setCurNav('1')">车辆监控平台</li>

          <li :class="{active:cur_nav==='3'}" @click="setCurNav('3')">运营数据分析</li>

        </ul>
    </div>
</template>

<script>
  import {mapGetters, mapMutations} from 'vuex'
    export default {
        name: 'MainNav',
        data () {
            return {
                //isNavShow: false,
            }
        },
        mounted(){

        },
      computed: {
        ...mapGetters(['cur_nav','isMainPopShow','isPopShow','isNavShow']),
      },
      methods: {
        ...mapMutations(['updateCurNav','updateIsMainPopShow','updateIsPopShow','updateIsNavShow']),
        setCurNav(state){
          this.updateCurNav(state);
          this.updateIsNavShow(false)
        },
        setNavShow(){
            this.updateIsNavShow(!this.isNavShow)
            this.updateIsMainPopShow(false);
            this.updateIsPopShow(false);
        }
      }
    }
</script>

<style lang="scss" scoped>
  @import "../../static/common/common.scss";
    #main-nav {
      position: absolute;
      top: 80px;
      right: -240px;
      z-index: 100;
      width: 268px;
      height: 288px;
      background: url("../../static/images/index/nav-bg1.png") no-repeat center;
      transition: right ease 1s;
      pointer-events: auto;
      ul{
        margin: 0;
        padding-left: 28px;
        li{
          list-style: none;
          line-height: 72px;
          font-size: $nav-font;
          cursor: pointer;
          &:hover,&.active{
            background:url("../../static/images/index/active-nav.png") no-repeat center;
          }
          &:first-child:hover,&:first-child.active{
            background:url("../../static/images/index/top-active.png") no-repeat center;
          }
        }
      }
      .tog-icon{
        width: 28px;
        height: 60px;
        position: absolute;
        left: 0px;
        bottom: 65px;
        background: url("../../static/images/index/tog-arrow.png") no-repeat center;
        transform: rotate(180deg);
        background-size: 22px 22px;
        cursor: pointer;
        transition: all ease 0.5s;
      }
      &.opened{
        right: 15px;
        transition: right ease 1s;
        .tog-icon{
          left: 2px;
          transform: rotate(360deg);
          transition: all ease 0.5s;
        }
      }
    }
</style>
